<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>nutshelljs Example - HTML Demo</title>
  </head>
  <body>
    <h3>HTML Demo</h3>
    <p>This example is showcasing:</p>
    <ul>
      <li>Use of IFRAME, HTML and Forms inside slide</li>
      <li>Prev/Next Controls</li>
      <li>Slide Transition</li>
    </ul>
    
    <!-- Start Demo -->
    
    <div id="slideshow2" style="background: #666; border: 1px solid black;">
      <div id="slider2" style="position: absolute; top: 0; left: 0">
        <div class="slidePanel2" style="background: #f33; color: white; padding: 0; width: 502px; height: 200px;">
          <iframe src="http://nutshelljs.wordpress.com/" height="200" width="502" style="border:0"></iframe>
        </div>
        <div class="slidePanel2" style="background: orange; color: white;">more <strong>HTML</strong> in <i>the works</i>
          <table border="1" width="100%">
            <tr>
              <th>test1</th>
              <th>test2</th>
            </tr>
            <tr>
              <td>test1</td>
              <td>test2</td>
            </tr>
            <tr>
              <td>test1</td>
              <td>test2</td>
            </tr>
          </table>
        </div>
        <div class="slidePanel2" style="background: #555; color: white;">
          <form action="" onsubmit="alert('this is an example form!'); return false;">
            <strong>Username:</strong><br/>
            <input type="text" value="" /><br />
            <strong>Password:</strong><br/>
            <input type="password" value="" /><br />
            <input type="submit" value="Login" />
          </form>
        </div>
      </div>
    </div>
    <div id="slideThumbs2" class="jumpToHolder">
      <div id="prevSlide2">
        Prev
      </div>
      <div id="nextSlide2">
        Next
      </div>
      <br class="clear"/>
    </div>
    <script type="text/javascript">
      var htmlDemo  = new nutShell.blockslide({slideWidth: 502, slideHeight: 200, vertical: false, currentSlide: 0, slidePanelClass: 'slidePanel2', 
                                          containerEL: 'slideshow2', sliderEL: 'slider2', nextEL : 'nextSlide2', prevEL : 'prevSlide2'});
    </script>

    <!-- End Demo -->

    <br/><br/>
    <strong>javascript:</strong><br />
    <textarea cols="60" rows="5" style="width: 100%">
&lt;script type="text/javascript"&gt;
  var htmlDemo  = new nutShell.blockslide({slideWidth: 502, slideHeight: 200, vertical: false, currentSlide: 0,
                                      containerEL: 'slideshow2', sliderEL: 'slider2', nextEL : 'nextSlide', prevEL : 'prevSlide'});
&lt;/script&gt;
    </textarea>
  </body>
</html>